import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';

import { Radio, Modal, Row, Col, Card, Space, Button, Input, InputNumber, Checkbox, Popover, notification } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
import { connect } from 'umi';
import { InfoCircleOutlined } from '@ant-design/icons'
import PopImgShow from '@/components/PopImgShow';
import PromoterGroup from '@/components/FormCondition/PromoterGroup'
import { options } from 'numeral';
const RuleTemplate = (props) => {
    const { dispatch, onClose, loading, handleCallback, visible = {}, cleanSelect } = props
    const { show = false, detail = [] } = visible;
    const [promoterLevelList, setPromoterLevelList] = useState([])
    const [list, setlist] = useState([])
    const [promoterGroupVisible, setPromoterVisible] = useState(false)
    const modalProps = {
        title: `设置比例`,
        width: 1200,
        visible: show,
        zIndex: 1001,
        loading,

    };
    const fetchLevelList = () => {
        dispatch({
            type: 'promoter/fetchPromoterLevelDetail',
            callback: (e) => {
                const { promoterLevelList } = e
                setPromoterLevelList(promoterLevelList)
            }
        })
    }
    useEffect(() => {
        fetchLevelList()
    }, [])
    console.log(detail, list)
    useEffect(() => {
        if (show) {
            setlist(detail.map(item => {
                const { commissionType, commissionDescription } = item
                if (commissionType === 'goods') {
                    return {
                        ...item,
                        commissionDescription: promoterLevelList.map(val => {
                            return commissionDescription.reduce((o, c) => {
                                if (c.levelId === val.id) {
                                    return c
                                }
                                else {
                                    return o
                                }
                            }, {
                                levelId: val.id,
                                goodsCommissionPercentage: 0,
                                inviteCommissionPercentage: 0
                            })

                        })
                    }
                }
                else {
                    return {
                        ...item,
                        commissionType: 'level',
                        commissionDescription: promoterLevelList.map(item => {
                            return {
                                levelId: item.id,
                                goodsCommissionPercentage: 0,
                                inviteCommissionPercentage: 0
                            }
                        })
                    }
                }
            }))
        } else {
            setlist([])
        }

    }, [show])

    const setListValue = (data) => {
        setlist(list.map((item, index) => {
            if (data.index === index) {
                return {
                    ...item, ...data
                }
            }
            return item
        }))
    }
    const removeList = (index) => {

        setlist(list.filter((o, key) => {
            return key !== index
        }))
    }

    const getColumns = [
        {
            title: '商品信息',
            width: 180,
            dataIndex: 'cover',
            render: (e, record) => {
                const { goodsName, price, priceType } = record
                return <Space>
                    <PopImgShow url={e}></PopImgShow>
                    <div>
                        <div> {goodsName}</div>
                        <div>{priceType === 'free' ? '--' : price}</div>
                    </div>
                </Space>
            }
        },
        {
            title: '分组',
            width: 180,
            dataIndex: 'groupNames',
            render: (e, record, index) => {
                const { groupIds = '' } = record
                return <PromoterGroup
                    placeholder='请选择分组'
                    type='multiple'
                    onChange={(e) => {
                        setListValue({
                            index: index,
                            groupIds: e.toString()
                        })
                    }}
                    value={groupIds.length ? groupIds.split(',').map(val => {
                        return Number(val)
                    }) : []}
                ></PromoterGroup >
            }
        },
        {
            title: '是否隐藏',
            align: 'left',
            dataIndex: 'hideFlag',
            render: (e, record, index) => {
                return <Radio.Group onChange={(o) => {
                    setListValue({
                        index: index,
                        hideFlag: o.target.value
                    })
                }} value={e}>
                    <Space direction="vertical">
                        <Radio value={'0'}>显示</Radio>
                        <Radio value={'1'}>隐藏</Radio>
                    </Space>
                </Radio.Group>
            }
        },
        {
            title: '推广价',
            dataIndex: 'promoterPrice',
            render: (e, record, index) => {
                return <InputNumber onChange={(o) => {
                    setListValue({
                        index: index,
                        promoterPrice: o
                    })
                }} value={e}></InputNumber>
            }
        },
        {
            title: <Popover content={<div>
                <div>
                    跟随等级规则：该商品的比例由推广员所在分组的等级比例决定
                    商品独立设置：可针对该商品单独设置比例
                </div>
            </div>}>
                选择比例  <InfoCircleOutlined></InfoCircleOutlined>
            </Popover >,
            align: 'left',
            dataIndex: 'commissionType',
            render: (e, record, index) => {
                return <Radio.Group onChange={(o) => {
                    setListValue({
                        index: index,
                        commissionType: o.target.value
                    })
                }} value={e}>
                    <Space direction="vertical">
                        <Radio disabled={record.payType === 'free'} value={'level'}>跟随等级</Radio>
                        <Radio disabled={record.payType === 'free'} value={'goods'}>商品独立设置</Radio>
                    </Space>
                </Radio.Group>
            }
        },
        {
            title: '等级',

            dataIndex: 'commissionDescription',
            render: (e, record, index) => {
                const { commissionType } = record
                return <Space direction="vertical">
                    {promoterLevelList.map(item => {
                        return <div style={{ height: 36, display: 'flex', alignItems: 'center' }}>{item.levelName} </div>
                    })}
                </Space>
            }
        },
        {
            title: '商品佣金比例',
            dataIndex: 'commissionDescription',
            render: (e, record, index) => {
                const { commissionDescription = [], payType } = record
                const { commissionType } = record
                if (payType === 'free') {
                    return <Space direction="vertical">
                        {promoterLevelList.map(item => {
                            return <InputNumber disabled={true} addonAfter={<span>%</span>} max={100} value={0}></InputNumber>
                        })}
                    </Space>
                } else if (commissionType === 'goods') {
                    return <Space direction="vertical">
                        {commissionDescription.map(item => {
                            const { goodsCommissionPercentage } = item
                            return <InputNumber onChange={(o) => {
                                setListValue({
                                    index: index,
                                    commissionDescription: commissionDescription.map(val => {
                                        if (item.levelId === val.levelId) {
                                            return {
                                                ...val,
                                                goodsCommissionPercentage: o
                                            }
                                        } else {
                                            return val
                                        }
                                    })
                                })
                            }} addonAfter={<span>%</span>} max={100} value={goodsCommissionPercentage}></InputNumber>
                        })}
                    </Space>
                }
                else {
                    return <Space direction="vertical">
                        {promoterLevelList.map(item => {
                            const { goodsCommissionPercentage } = item
                            return <InputNumber disabled={true} addonAfter={<span>%</span>} max={100} value={goodsCommissionPercentage}></InputNumber>
                        })}
                    </Space>
                }
            }
        },
        {
            title: '邀请人奖励比例',
            dataIndex: 'commissionDescription',
            render: (e, record, index) => {
                const { commissionDescription = [], payType } = record
                const { commissionType } = record
                if (payType === 'free') {
                    return <Space direction="vertical">
                        {promoterLevelList.map(item => {
                            return <InputNumber disabled={true} addonAfter={<span>%</span>} max={100} value={0}></InputNumber>
                        })}
                    </Space>
                } else if (commissionType === 'goods') {
                    return <Space direction="vertical">
                        {commissionDescription.map(item => {
                            const { inviteCommissionPercentage } = item
                            return <InputNumber onChange={(o) => {
                                setListValue({
                                    index: index,
                                    commissionDescription: commissionDescription.map(val => {
                                        if (item.levelId === val.levelId) {
                                            return {
                                                ...val,
                                                inviteCommissionPercentage: o
                                            }
                                        } else {
                                            return val
                                        }
                                    })
                                })
                            }} addonAfter={<span>%</span>} max={100} value={inviteCommissionPercentage}></InputNumber>
                        })}
                    </Space>
                }
                else {
                    return <Space direction="vertical">
                        {promoterLevelList.map(item => {
                            const { inviteCommissionPercentage } = item
                            return <InputNumber disabled={true} addonAfter={<span>%</span>} max={100} value={inviteCommissionPercentage}></InputNumber>
                        })}
                    </Space>
                }
            }
        },
        {
            title: '操作',
            dataIndex: 'id',
            render: (e, record, index) => {
                return <Button onClick={() => removeList(index)} type='link'>删除</Button>
            }
        },
    ];

    return <Modal
        {...modalProps}
        onCancel={onClose}
        onOk={() => {
            const promoterGoodsList = list.map(item => {
                const { goodsId, groupIds, hideFlag, promoterPrice, commissionType, goodsType, commissionDescription = [] } = item
                return {
                    hideFlag,
                    promoterPrice,
                    groupIds,
                    id: item.id,
                    goodsId,
                    goodsType,
                    commissionType,
                    commissionDescription: commissionType === 'goods' ? JSON.stringify(commissionDescription) : ''
                }
            })
            if (promoterGoodsList.length === 0) {
                notification.warn({
                    message: '温馨提示',
                    description: `请先选择要设置比例的商品`,
                });
            }
            else {
                dispatch({
                    type: 'promoter/fakeSavePromoterGoods',
                    payload: {
                        promoterGoodsList
                    },
                    callback: (e) => {
                        onClose()
                        handleCallback()
                        cleanSelect && cleanSelect()
                    }
                })
            }
        }}
    >
        <TableDataBlock
            columns={getColumns}
            rowKey={(record) => `${record.id}`}
            list={list}
            pagination={false}
        ></TableDataBlock>
       
    </Modal>

}
export default connect(({ promoter, loading }) => ({
    loading: loading.effects['promoter/fakeSavePromoterGoods'],
}))(RuleTemplate);
;
